<template>
	<view>
		<u-checkbox-group v-model="payValue" class="checkbox-group" @change="checkboxChange"
			:style="{ paddingBottom:isShowSelect? '74px':'' }">
			<view class="device-item clearfix" v-for="item in payMap" :key="item.id">
				<div class="clearfix left-container">
					<div class="fl left">
						<label>
							<u-checkbox shape="circle" :customStyle="{ marginBottom: '8px' }" :name="item.id"
								v-if="isShowSelect">
							</u-checkbox>
						</label>
						<image src="../../static/logo.png" class="photo" mode=""></image>
						<div>
							<div>
								<text class="username">{{ item.nickName }}</text>
							</div>
							<text class="usertel">{{ item.phone }}</text>
						</div>
					</div>
					<div class="fr right">
						<div>
							<image src="@/static/icons/jiayou-lvse.svg" mode=""></image>
							<div style="color: #008736;margin-left: 6px;">{{item.effectHint}}</div>
						</div>
						<div>
							<div class="pay_text">续费</div>
							<u-icon name="arrow-right" size="10px"></u-icon>
						</div>
					</div>
				</div>
			</view>
		</u-checkbox-group>
		<PayPopup ref="payPopupRef" :numPhone="payValue.length"></PayPopup>
		<div class="footer_button" ref="buttonRef" id="buttonRef" v-show="isShowSelect">
			<u-button shape="circle" color="#01B5FC" text="缴费" :disabled="payValue.length === 0" @click="handleOnClick">
			</u-button>
		</div>
	</view>
</template>
<script>
	import {
		getTaskPhoneList
	} from '@/api/api.js'
	import PayPopup from "@/components/payPopup/payPopup.vue"
	export default {
		components: {
			PayPopup
		},
		data() {
			return {
				payValue: [],
				payMap: [],
				paddingHight: 0,
				phoneId: '',
				isShowSelect: false
			};
		},
		onNavigationBarButtonTap(e) {
			let webView = this.$mp.page.$getAppWebview();
			if (e.index === 1) {
				webView.setTitleNViewButtonStyle(0, {
					width: '0'
				});
				webView.setTitleNViewButtonStyle(1, {
					width: '0'
				});
				webView.setTitleNViewButtonStyle(2, {
					width: '50'
				});
				this.isShowSelect = true
			} else if (e.index === 2) {
				this.isShowSelect = false
				webView.setTitleNViewButtonStyle(0, {
					width: '30'
				});
				webView.setTitleNViewButtonStyle(1, {
					width: '30'
				});
				webView.setTitleNViewButtonStyle(2, {
					width: '0'
				});
			} else {
				uni.navigateTo({
					url: '/pages/renewalRecord/renewalRecord'
				})
			}
		},
		mounted() {
			let webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(2, {
				width: '0'
			});
		},
		onLoad(option) {
			this.phoneId = option.phoneId
			this.getTaskPhoneList()
		},
		methods: {
			checkboxChange(value) {
				this.payValue = value
			},
			handleOnClick(data) {
				this.$refs.payPopupRef.open(data)
			},
			// 任务手机列表
			async getTaskPhoneList() {
				const res = await getTaskPhoneList({
					id: this.phoneId
				})
				if (res.code === 10000) {
					this.payMap = res.data
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.checkbox-group {
		display: block;
		padding: 0 1.2rem;
	}

	.device-item {
		width: 100%;
		padding: 0.2rem 0;
		margin-top: 12px;

		.photo {
			width: 42px;
			height: 42px;
			object-fit: cover;
			border-radius: 50%;
			margin: 0 6px 0 10px;
		}

		.left-container {
			height: 42px;
			width: 100%;
			box-sizing: border-box;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 60%;
				box-sizing: border-box;

				label {
					margin-top: 12px;
				}

				.username {
					font-size: 14px;
				}

				.usertel {
					font-size: 12px;
				}
			}

			.right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
				box-sizing: border-box;
				width: 40%;
				height: 100%;

				>div {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex-wrap: nowrap;
					width: 33.33%;
					text-align: center;
					white-space: nowrap;

					>div {
						font-size: 10px;
					}
				}

				image {
					width: 20px;
					height: 20px;
				}
			}
		}

	}

	.pay_text {
		color: #666666;
		margin-right: 4px;
		font-size: 12px !important;
	}

	.footer_button {
		position: fixed;
		bottom: 0;
		height: 50px;
		left: 12px;
		right: 12px;
		padding: 12px 0;
		background: #F7F7F7;
	}
</style>
